<template>
  <div class="album">
    <div class="album-content">
      <main-table>
        <!-- 左边 -->
        <div slot="left" class="left">
          <a href="javascript:;" class="a">全部新碟</a>
          <div class="tab">
            <a
              href="javascript:;"
              v-for="(item, index) in tabList"
              :key="index"
              @click="tabClick(item)"
              >{{ item.name }}</a
            >
          </div>
        </div>
        <!-- 右边 -->
        <div slot="right"></div>
        <div
          slot="body"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
        >
          <album-body :albumList="albumList"></album-body>
        </div>
      </main-table>
      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="albumInfo.limit"
        :current-page="albumInfo.offset / albumInfo.limit + 1"
        @current-change="currentChange"
      >
      </el-pagination>
    </div>
    <main-footer></main-footer>
  </div>
</template>

<script>
import { getAllAlbum } from '@/api/api.js'
import mainFooter from '../../components/common/mainFooter.vue'
import MainTable from '../../components/common/mainTable.vue'
import AlbumBody from './components/albumBody.vue'
export default {
  components: { mainFooter, MainTable, AlbumBody },
  data() {
    return {
      tabList: [
        {
          name: '全部',
          area: 'ALL'
        },
        {
          name: '华语',
          area: 'ZH'
        },
        {
          name: '欧美',
          area: 'EA'
        },
        {
          name: '韩国',
          area: 'KR'
        },
        {
          name: '日本',
          area: 'JP'
        }
      ],
      albumInfo: {
        limit: 30,
        offset: 0,
        area: 'ALL'
      },
      total: 0,
      // 新碟·列表
      albumList: [],
      loading: false
    }
  },
  created() {
    this.getAllAlbum()
  },
  methods: {
    // 切换页数
    currentChange(newPage) {
      console.log(newPage)
      this.albumInfo.offset = (newPage - 1) * this.albumInfo.limit
      this.loading = true
      this.getAllAlbum()
    },
    // 请求
    async getAllAlbum() {
      if (this.$route.query.area) {
        this.albumInfo.area = this.$route.query.area
      }
      const res = await getAllAlbum(this.albumInfo)
      this.loading = false
      console.log(res)
      this.total = res.total
      this.albumList = res.albums
      for (let imgs of this.albumList) {
        imgs.picUrl += '?param=130y130'
      }
      console.log(this.albumList)
    },
    // 点击导航
    tabClick(item) {
      this.$router
        .push({
          path: '/discover/album',
          query: {
            area: item.area
          }
        })
        .catch((err) => err)
      console.log(item)
    }
  },
  watch: {
    $route() {
      this.getAllAlbum()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-pagination {
  margin: 50px 200px 0;
}
.left {
  display: flex;
  align-items: center;
}
.album {
  .album-content {
    width: 980px;
    margin: 0 auto;
    padding: 40px;
    background: #fff;
    border: 1px solid #ccc;
    .main-table {
      .a {
        display: block;
        font-size: 24px;
        padding-bottom: 10px;
      }
      .tab {
        margin-bottom: 5px;
        a {
          padding: 0 20px;
          color: #666;
          border-right: 1px solid #ccc;
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
}
</style>
